{% extends 'novel_base.html'%}
{% load staticfiles %}
{% block style %}
<style>
    .bs-example:after{
        content:"无良小万";
    }
    .catalogue_style{
        margin: auto 0;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
    .a_sty{
        padding: 0;
        margin: 0.3rem 2rem;
        -moz-box-shadow: 0.2rem 0.2rem 0.5rem #888888;
        box-shadow: 0.2rem 0.2rem 0.5rem #888888;
    }
</style>
{% endblock %}
{% block title %}内容{% endblock %}
{% block content %}
    {% verbatim cdblock %}
        <div id="noveldetail" class="catalogue_style" :style="cntBgColor">
        <div class="container ">
            <div class="bs-callout bs-callout-info">
                <h1 class="page-header" v-cloak :style="cntColor">{{ chapter }}</h1>
                <p v-cloak :style="cntColor">书名：{{title}}</p>
    {% endverbatim cdblock %}
                <img src="{% static 'imgs/load/loading2.gif' %}" id="load" class="hidden">
    {% verbatim cdblock %}
            </div>
            <div class="bs-docs-section">
                <div class="bs-example" :style="cntBgColor">
                    <div class="btn-group">
    {% endverbatim cdblock %}
                        <a href="{% url 'fun_novel_page' %}" class="btn btn-success">
                            <span class="glyphicon glyphicon-list-alt"></span>
                            <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block">列表</span>
                        </a>
    {% verbatim cdblock %}
                        <a :href="catalogue_page" class="btn btn-warning">
                            <span class="glyphicon glyphicon-th-list"></span>
                            <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block">目录</span>
                        </a>
                        <a :href="next_page" class="btn btn-danger">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span>下一章</span>
                        </a>
                    </div>
                </div>
                <figure class="highlight" :style="cntBgColor">
                    <div class="row text-center">
                        <div class="btn-group">
                            <!-- <div class="btn btn-default dropdown">
                                <kbd data-toggle="dropdown"><span class="glyphicon glyphicon-font"></span></kbd>
                                <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block" data-toggle="dropdown">字体</span>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">当前选择</li>
                                    <li disabled='disabled'><a href="#">{{ fonts[font_idx].id }}</a></li>
                                    <li class="divider"></li>
                                    <li v-for="(font, idx) in fonts" @click="selectFont(idx)">
                                        <a href="#">{{ font.id }}</a>
                                    </li>
                                </ul>
                            </div> -->
                            <div class="btn btn-default dropdown">
                                <kbd data-toggle="dropdown"><span class="glyphicon glyphicon-text-size"></span></kbd>
                                <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block" data-toggle="dropdown">字号</span>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">当前选择</li>
                                    <li disabled='disabled'><a href="#">{{ sizes[size_idx].id }}</a></li>
                                    <li class="divider"></li>
                                    <li v-for="(size, idx) in sizes" @click="selectSize(idx)">
                                        <a href="#">{{ size.id }}</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn btn-default dropdown">
                                <kbd data-toggle="dropdown"><span class="glyphicon glyphicon-text-background"></span></kbd>
                                <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block" data-toggle="dropdown">背景</span>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">当前选择</li>
                                    <li disabled='disabled'><a href="#" class="a_sty" :style="cntBgColor">&nbsp;</a></li>
                                    <li class="divider"></li>
                                    <li v-for="(bgcolor, idx) in bgcolors" @click="selectBgColor(idx)">
                                        <a href="#" class="a_sty" :style="bgcolor.id">&nbsp;</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn btn-default dropdown">
                                <kbd data-toggle="dropdown"><span class="glyphicon glyphicon-text-color"></span></kbd>
                                <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block" data-toggle="dropdown">颜色</span>
                                <ul class="dropdown-menu">
                                    <li class="dropdown-header">当前选择</li>
                                    <li disabled='disabled'><a href="#" class="a_sty" :style="colors[color_idx].id">&nbsp;</a></li>
                                    <li class="divider"></li>
                                    <li v-for="(color, idx) in colors" @click="selectColor(idx)">
                                        <a href="#" class="a_sty" :style="color.id">&nbsp;</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="btn btn-success" @click="douseTheGlim">
                                <kbd v-show="isOff" class="glyphicon glyphicon-certificate"></kbd>
                                <span v-cloak v-show="!isOff" class="glyphicon glyphicon-certificate"></span>
                                <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block" v-cloak>{{ light }}</span>
                            </div>
                        </div>
                        
                    </div>
                    <p
                        :style="[cntColor, cntSize, cntFont]" 
                        v-html="content" 
                        style="min-height: 50rem"
                    ></p>
                </figure>
            </div>
            <div class="btn-group" style="margin-top: -30px;margin-bottom: 30px">
    {% endverbatim cdblock %}
                <a href="{% url 'fun_novel_page' %}" class="btn btn-success">
                    <span class="glyphicon glyphicon-list-alt"></span>
                    <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block">列表</span>
                </a>
    {% verbatim cdblock %}
                <a :href="catalogue_page" class="btn btn-warning">
                    <span class="glyphicon glyphicon-th-list"></span>
                    <span class="visible-lg-inline-block visible-md-inline-block visible-sm-inline-block">目录</span>
                </a>
                <a :href="next_page" class="btn btn-danger">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span>下一章</span>
                </a>
            </div>
        </div>
    {% endverbatim cdblock %}
    <span class="hidden">{{chapter.chapter}}</span>
    <span class="hidden">{{chapter.site}}</span>
{% endblock %}

{% block footerscript %}
    <script src="{% static 'js/novel/detail.js' %}"></script>
{% endblock %}